import { Layout, Menu, Dropdown } from 'antd';
import React from 'react';
import './index.less';
import portrait from '@/images/portrait.png';
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
  BookOutlined,
  TeamOutlined,
  LineChartOutlined,
  FormOutlined,
  CalendarOutlined,
  KeyOutlined,
} from '@ant-design/icons';

import { Link } from 'umi';

const { Header, Sider, Content } = Layout;
const { SubMenu } = Menu;

export default class Index extends React.Component {
  state = {
    collapsed: false,
  };

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };

  render() {
    console.log(this.props.children);
    return (
      <Layout>
        <Sider
          className="side"
          width={294}
          trigger={null}
          collapsible
          collapsed={this.state.collapsed}
        >
          <div className="logo">学生实训管理系统</div>
          <Menu theme="light" mode="inline" defaultSelectedKeys={['1']}>
            <Menu.Item key="1" icon={<UserOutlined />}>
              <Link to="/admin/studentInfo/index">学生信息管理</Link>
            </Menu.Item>
            <Menu.Item key="2" icon={<UserOutlined />}>
              <Link to="/admin/teacherInfo/index">教师信息管理</Link>
            </Menu.Item>
            <Menu.Item key="3" icon={<TeamOutlined />}>
              <Link to="/admin/projectTeam/index">项目组管理</Link>
            </Menu.Item>
            <Menu.Item key="4" icon={<BookOutlined />}>
              <Link to="/admin/course/index">课程管理</Link>
            </Menu.Item>
            <Menu.Item key="5" icon={<LineChartOutlined />}>
              <Link to="/admin/attendance/index">考勤管理</Link>
            </Menu.Item>
            <Menu.Item key="6" icon={<CalendarOutlined />}>
              <Link to="/admin/absence/index">请假记录</Link>
            </Menu.Item>
            <Menu.Item key="7" icon={<FormOutlined />}>
              <Link to="/admin/mark/index">综合打分记录</Link>
            </Menu.Item>
            <Menu.Item key="8" icon={<KeyOutlined />}>
              <Link to="/admin/changePassword/index">修改密码</Link>
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header className="site-layout-background" style={{ padding: 0 }}>
            {React.createElement(
              this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
              {
                className: 'trigger',
                onClick: this.toggle,
              },
            )}

            <div className="mainAuth">
              <Dropdown
                overlay={
                  <Menu>
                    <Menu.Item key="1" icon={<UserOutlined />}>
                      个人信息
                    </Menu.Item>
                    <Menu.Item key="2" icon={<UserOutlined />}>
                      密码修改
                    </Menu.Item>
                    <Menu.Item key="3" icon={<UserOutlined />}>
                      <Link to="/login">退出登录</Link>
                    </Menu.Item>
                  </Menu>
                }
              >
                <a>
                  <img alt="管理员" src={portrait} />
                  <span style={{ color: '#000' }}>系统管理员</span>
                </a>
              </Dropdown>
            </div>
          </Header>

          <Content
            className="site-layout-background"
            style={{
              margin: '24px 16px',
              padding: 24,
              minHeight: 280,
            }}
          >
            {this.props.children}
          </Content>
        </Layout>
      </Layout>
    );
  }
}
